<template>
  <el-dropdown trigger="hover" @command="handleCategoryClick" v-loading="loading">
    <button class="category-btn">
      <i class="el-icon-menu"></i>
      商品分类
      <i class="el-icon-arrow-down el-icon--right"></i>
    </button>
    <el-dropdown-menu slot="dropdown" class="category-dropdown">
      <template v-if="categories && categories.length > 0">
        <el-dropdown-item 
          v-for="category in categories" 
          :key="category.categoryId"
          :command="category.categoryId"
          :disabled="category.isUse === 0"
        >
          <i class="el-icon-goods"></i>
          {{ category.name }}
        </el-dropdown-item>
      </template>
      <el-dropdown-item v-else disabled>
        <i class="el-icon-warning"></i>
        暂无分类数据
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import CategoryService from '@/Services/CategoryService'

export default {
  name: 'CategoryMenu',
  data() {
    return {
      categories: [],
      loading: false
    }
  },
  created() {
    this.fetchCategories()
  },
  methods: {
    async fetchCategories() {
      try {
        this.loading = true
        const response = await CategoryService.GetAll()
        if (response && response.$values) {
          this.categories = response.$values
        } else if (Array.isArray(response)) {
          this.categories = response
        } else {
          this.categories = []
          console.warn('Unexpected response format:', response)
        }
      } catch (error) {
        console.error('获取分类数据失败:', error)
        this.$message.error('获取分类数据失败')
        this.categories = []
      } finally {
        this.loading = false
      }
    },
    handleCategoryClick(categoryId) {
      if (!categoryId) {
        console.warn('Invalid category ID')
        return
      }
      // 检查当前是否已经在相同的分类页面
      if (this.$route.name === 'Category' && this.$route.params.id === categoryId) {
        return
      }
      // 使用 try-catch 处理导航错误
      try {
        this.$router.push({
          name: 'Category',
          params: { id: categoryId }
        }).catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error('导航错误:', err)
          }
        })
      } catch (error) {
        console.error('处理分类点击时发生错误:', error)
      }
    }
  }
}
</script>

<style scoped>
.category-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.category-btn:hover {
  color: #ff6a00;
}

.category-dropdown {
  min-width: 160px;
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.category-dropdown .el-dropdown-menu__item {
  padding: 12px 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-dropdown .el-dropdown-menu__item:hover {
  background-color: #fff9e6;
  color: #ff6a00;
}

.category-dropdown .el-dropdown-menu__item.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.category-dropdown .el-dropdown-menu__item.is-disabled:hover {
  background-color: #fff;
  color: #c0c4cc;
}
</style> 